<template>
	<view :class="[config.style]">
		<!-- #ifdef H5-->
		<Top :config="config"></Top>
		<!-- #endif -->
		<view class="main-section top member-list">
			<view class="item" v-for="(item,index) in list" :key="index" @click="goToDetailLink(item.id)">
				<view class="bg" :style="{'background-color':item.config.bg.color}">
					<image :src="item.card_bg" />
				</view>
				<view class="card-data">
					<view class="header">
						<view class="logo">
							<image :src="item.cover_100" class="logo" mode="widthFix" />
						</view>
						<view class="title" :style="{'color':item.config.title.color}">
							{{config.title}}
						</view>
					</view>
					<view class="card-title" :style="{'color':item.config.title.color}">
						{{item.title}}
					</view>
					<view class="card-description" :style="{'color':item.config.description.color}">
						{{item.description}}
					</view>
					<view class="card-status">
						<view class="status" v-if="item.have_card!==undefined && item.have_card.mt_id == item.id">
							已开通
						</view>
						<view class="status" v-else>
							立即开通
						</view>
						
						<view class="time" v-if="item.have_card!==undefined && item.have_card.mt_id == item.id">
							<text>有效期至：</text>
							<text>{{item.have_card.end_time_str}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import Top from '../common/top.vue'
	export default {
		components: {
			Top,
		},
		data() {
			return {
				urlParams: {},
				list: []
			}
		},
		async onLoad(option) {
			await this.$onLaunched;
			//获取url参数
			this.urlParams = option
		},
		created() {
			this.getList()
		},
		onPageScroll(e) {
			
		},
		onReachBottom() {
			console.log('页面滚动到底部')
		},
		computed: {
			...mapState(['config'])
		},
		methods: {

		
			//加载会员卡列表
			getList: function() {
				let that = this
				let data = {}
					data.action = 'lists'
					data.page = this.page
				//获取数据
				//获取全局配置
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/member'
					//#endif
					//#ifdef H5
					url = 'entry/site/member'
					
					//#endif
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						//console.log(res.data.code);
						if (res.data.code == 200) {
							that.list = res.data.data
						}
					}
				})
			},
			//路由至详情页
			goToDetailLink: function(id){
				let urlParams = 'id='+id
				let url = 'detail?' + urlParams
				console.log(url)
				//指定跳转地址
				uni.navigateTo({
				    url: url
				});
			},
			
			
		}
	}
</script>

<style lang="scss">
	.member-list {
		
		.item {
			position: relative;
			padding: 20rpx;
			width: 710rpx;
			height: 448rpx;
			margin: 20rpx;
			border-radius: 20rpx;
			box-sizing: border-box;
			overflow: hidden;
			.bg {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: 1;
				image {
					width: 100%;
				}
			}
			.card-data {
				position: relative;
				z-index: 2;
				.header {
					position: relative;
					display: flex;
					z-index: 3;
					.logo {
						margin-bottom: 20rpx;
						image {
							width: 72rpx;
							height: 72rpx;
							border-radius: 10rpx;
						}
					}
					.title {
						padding-left: 20rpx;
						font-size: 28rpx;
						line-height: 72rpx;
					}
				}
				.card-title {
					margin-bottom: 20rpx;
					font-size: 44rpx;
					font-weight: 600;
					z-index: 2;
				}
				.card-description {
					margin-bottom: 20rpx;
					font-size: 28rpx;
					z-index: 3;
				}
				.card-status {
					display: flex;
					color: #fff;
					font-size: 28rpx;
					.status {
						padding: 10rpx 20rpx;
						border-radius: 10rpx;
						border: 2rpx solid #fff;
					}
					.time {
						padding: 10rpx 20rpx;
					}
				}
				
			}
			
		}
	}
</style>
